<template>
	<el-dialog @close="onCancel" :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="90%">
		<el-form ref="formRef" :model="form" label-width="110px" disabled>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商品名" prop="title">
						<el-input v-model="form.title" placeholder="请输入商品名" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品分类" prop="goods_class_id">
						<el-cascader v-model="form.goods_class_id" :props="goodsClassProps" placeholder="请选择商品分类" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商品标签" prop="tags_ids">
						<el-input v-model="form.tags_ids" placeholder="请输入商品标签" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品供应商" prop="supplier_name">
						<el-input v-model="form.supplier_name" placeholder="请输入商品供应商" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="虚拟销量" prop="virtual_sales">
						<el-input-number v-model="form.virtual_sales" :min="0" :precision="0" :controls="false" placeholder="请输入虚拟销量" class="w100" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="display_order">
						<el-input-number v-model="form.display_order" :min="0" :precision="0" :controls="false" placeholder="请输入排序" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="商品描述" prop="descri">
						<el-input v-model="form.descri" placeholder="请输入商品描述" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="12">
					<el-form-item label="上架时间" prop="time">
						<el-date-picker
							v-model="form.time"
							type="datetimerange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							format="YYYY/MM/DD HH:mm:ss"
							value-format="X"
							class="w100"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="thumb_video">
						<template #label>
							商品视频<br />
							大小不超过5M
						</template>
						<image-upload-cOS v-model="form.thumb_video" isDelete video path="goods/thumb" ref="imageUploadThumbVideoRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="thumb">
						<template #label>
							商品封面图<br />
							宽高比例1:1<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.thumb" path="goods/thumb" isDelete ref="imageUploadThumbRef" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="share_img">
						<template #label>
							商品分享图<br />
							宽高比例5:4<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.share_img" path="goods/indexShare" isDelete ref="imageUploadShareImgRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item prop="images">
						<template #label>
							商品轮播图<br />
							宽高比例1:1<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.images" :maxLength="4" path="goods/images" isDelete ref="imageUploadImagesRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item prop="details">
						<template #label>
							商品详情图<br />
							宽750高1000以内<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.details" isDelete :maxLength="30" path="goods/details" ref="imageUploadDetailsRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-table :data="specifications_val" border class="mb20">
				<el-table-column label="规格属性" align="center">
					<template #default="scope">
						{{ scope.row.skus.map((item: any) => item.v).join('_') }}
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center">
					<template #default="scope">
						<el-image v-if="scope.row.icon" :src="scope.row.icon_show" fit="scale-down" style="width: 50px; height: 50px" />
					</template>
				</el-table-column>
				<el-table-column label="库存" prop="stock" align="center" />
				<el-table-column label="原价" prop="old_price" align="center" />
				<el-table-column label="成本价" prop="cost_price" align="center" />
				<el-table-column label="管家佣金" prop="sale_price_member" align="center" />
				<el-table-column label="经理佣金" prop="sale_price_member1" align="center" />
				<el-table-column label="平台服务费" prop="service_price" align="center" />
				<el-table-column label="售价" prop="sale_price" align="center" />
			</el-table>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-table :data="form.shipping" border>
						<el-table-column label="省/市/区、县" align="center">
							<template #default="scope">
								{{ scope.row.combination.join('-') }}
							</template>
						</el-table-column>
						<el-table-column label="运费(元)" align="center" prop="price" />
					</el-table>
				</el-col>
				<el-col :span="12">
					<el-table :data="form.delivery" border>
						<el-table-column label="省/市" align="center">
							<template #default="scope">
								{{ scope.row.combination.join('-') }}
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="退换货地址">
						<el-table :data="form.receiving_address" border>
							<el-table-column label="地址" align="center">
								<template #default="scope">
									{{ receivingAddressFilters(scope.row) }}
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { goodsSelectClass, goodsSelect } from '/@/api/admin1';

export default {
	name: 'goodViewDialog',
	setup() {
		const state = reactive({
			title: '商品查看',
			open: false,
			form: {} as any,
			goodsClassProps: {
				lazy: true,
				lazyLoad(node: any, resolve: any) {
					const { value, level } = node;
					_goodsSelectClass({ pid: level ? value : 0, pageNum: 1, pageSize: 100 }, level, resolve);
				},
				value: 'id',
				label: 'name',
			},
			shippingInfo: {
				area: [],
				price: 0,
			},
			deliveryInfo: {
				area: '',
			},
			remoteLoading: false,
			submitLoading: false,
			specifications_val: [] as any,
		});

		const formRef = ref(null);
		const imageUploadThumbVideoRef = ref(null);
		const imageUploadThumbRef = ref(null);
		const imageUploadShareImgRef = ref(null);
		const imageUploadImagesRef = ref(null);
		const imageUploadDetailsRef = ref(null);

		/********** 点击事件(on开头) **********/
		// 取消按钮
		const onCancel = () => {
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			reset();
			state.open = true;
			_goodsSelect(config.data);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				display_order: 0, // 排序
				goods_class_id: '', // 商品分类
				supplier_id: '', // 供应商id
				time: [1672502400, 1988121600],
				thumb_video: '', // 商品视频
				supplier_name: '', // 供应商
				title: '', // 商品名
				is_zone: 0, // 是否采集商品
				descri: '', // 描述
				thumb: '', // 封面图
				// proportion: 70, // 分佣比例
				images: '', // 轮播图
				details: '', // 商品详情
				tags_ids: '', // 标签
				shipping: [], // 不包邮
				delivery: [], // 不配送
				virtual_sales: 0, // 虚拟销量
				share_img: '', // 分享图
				specifications: '', // 规格属性sku
				receiving_address: [], // 退货地址
				goods_id: '', // 商品id
				target_id: '', // 帮扶区域
			};
			state.specifications_val = [];
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadThumbVideoRef.value as any)?.reset();
				(imageUploadThumbRef.value as any)?.reset();
				(imageUploadShareImgRef.value as any)?.reset();
				(imageUploadImagesRef.value as any)?.reset();
				(imageUploadDetailsRef.value as any)?.reset();
			});
		};
		// 退货地址组合
		const receivingAddressFilters = (row: any) => {
			return `${row.name},${row.mobile},${row.province},${row.city},${row.county},${row.address}`;
		};

		/********** 网络事件 **********/
		// 选择商品分类
		const _goodsSelectClass = (_data: object, _level: number, resolve: any) => {
			goodsSelectClass(_data).then((res: any) => {
				let nodes = res.data.list.map((item: any) => ({
					id: item.id,
					name: item.name,
					leaf: _level >= 1,
				}));
				resolve(nodes);
			});
		};
		// 商品查询
		const _goodsSelect = (_data: object) => {
			goodsSelect(_data).then((res: any) => {
				let info: any = res.data.info;
				let images = info.images.map((item: any) => item.url_show).join(',');
				let tags_ids = info.tags.map((item: any) => item.name).join(',');
				let details = JSON.parse(info.details)
					.map((item: any) => item.url_show)
					.join(',');
				let shipping = info.goods_not_mail.map((item: any) => {
					let combination = [];
					if (item.county) {
						combination = [item.province, item.city, item.county];
					} else if (item.city) {
						combination = [item.province, item.city];
					} else {
						combination = [item.province];
					}
					return {
						combination,
						province: item.province,
						city: item.city,
						county: item.county,
						price: item.price,
					};
				});
				let delivery = info.goods_not_send.map((item: any) => {
					let combination = [];
					if (item.county) {
						combination = [item.province, item.city, item.county];
					} else if (item.city) {
						combination = [item.province, item.city];
					} else {
						combination = [item.province];
					}
					return {
						combination,
						province: item.province,
						city: item.city,
						county: item.county,
					};
				});
				console.log('商品查询', res);
				state.specifications_val = res.data.specifications.specifications_val;
				state.form = {
					...state.form,
					display_order: info.display_order,
					goods_class_id: [info.goods_class_pid, info.goods_class_id],
					supplier_name: info.supplier_name,
					title: info.title,
					is_zone: info.is_zone,
					descri: info.descri,
					thumb: info.thumb_show,
					images: images,
					details: details,
					tags_ids: tags_ids,
					shipping: shipping,
					delivery: delivery,
					virtual_sales: info.virtual_sales,
					share_img: info.share_img_show,
					receiving_address: info.goods_receiving_address,
					goods_id: info.id,
					thumb_video: info.thumb_video_show,
					time: [info.start_time, info.end_time],
				};
				nextTick(() => {
					(imageUploadThumbVideoRef.value as any)?.dataLoading();
					(imageUploadThumbRef.value as any)?.dataLoading();
					(imageUploadShareImgRef.value as any)?.dataLoading();
					(imageUploadImagesRef.value as any)?.dataLoading();
					(imageUploadDetailsRef.value as any)?.dataLoading();
				});
			});
		};

		return {
			formRef,
			imageUploadThumbVideoRef,
			imageUploadThumbRef,
			imageUploadShareImgRef,
			imageUploadImagesRef,
			imageUploadDetailsRef,
			receivingAddressFilters,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
